<template>
    <el-card class="box-card common_wrapper" >
        <div class="common_container common-layout">
            <el-container>
                <el-aside width="200px">

                    <el-row class="tac">
                        <el-col >
                            <!-- @open="handleOpen" @close="handleClose" -->
                            <el-menu default-active="2" class="el-menu-vertical-demo"  >
                                <el-sub-menu index="1" >
                                    <template #title >
                                        <span id="inform">消息</span>
                                    </template>
                                        <router-link class="itemLink" to="/communication/systemNote">
                                            <el-menu-item index="1-1">系统通知</el-menu-item>
                                        </router-link>
                                        <router-link class="itemLink" to="/communication/interactNote">
                                            <el-menu-item index="1-2">互动通知</el-menu-item>
                                        </router-link>
                                        <router-link class="itemLink" to="/communication/orderNote">
                                            <el-menu-item index="1-3">订单通知</el-menu-item>
                                        </router-link>
                                </el-sub-menu>
                                
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>

                <router-view></router-view>

                
            </el-container>
        </div>
    </el-card>
</template>

<script setup lang="ts">

</script>

<style  lang="less">
    .itemLink{
        text-decoration: none!important;
    }
    .common_wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        background-color: rgb(247, 247, 247);
        

        .common_container {
            width: 1200px;
            display: flex;
            align-items: center;
            #inform {
                border-left: 4px solid #f93684;
                padding-left: 21px;
            }

            .item {
                margin-left: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
                background-color: #fff;
                align-items: center;
                justify-content: left;
                font-size: 14px;
                .active{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;
                }
                .quest {
                background-color: #f93684;
                width: 100px;
                height: 40px;
                margin-left: 15px;
                
                }
            }


            .iteminform {
                display: flex;
                
            }

            
        }
    
    }
    
</style>
